<!DOCTYPE html>
<html class="wf-oxygen-n4-active wf-opensans-n7-active wf-opensans-n4-active wf-active" lang="en">
    <head>
        <meta charset="utf-8">
        <title><?php echo MasterView::getInstance()->pageTitle; ?></title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="" name="description">
        <meta content="" name="author">
        <!--[if lt IE 9]>
        <script src="JS/Desktop/html5shiv.js"></script>
        <![endif]-->
        <style>
            .loading-content{
                position:fixed;
                left:0;
                top:0;
                width:100%;
                height:100%;
                z-index:9000;

                background-color: #f6f7fa;
                /* Safari 4-5, Chrome 1-9 */
                background: -webkit-gradient(linear, left top, right top, from(#fcfcfc), to(#f6f7fa));
                /* Safari 5.1, Chrome 10+ */
                background: -webkit-linear-gradient(left, #fcfcfc, #f6f7fa);
                /* Firefox 3.6+ */
                background: -moz-linear-gradient(left, #fcfcfc, #f6f7fa);
                /* IE 10 */
                background: -ms-linear-gradient(left, #fcfcfc, #f6f7fa);
                /* Opera 11.10+ */
                background: -o-linear-gradient(left, #fcfcfc, #f6f7fa);
            }
            .loading-container .app-logo{margin:0 auto; text-align:center;}
            .loading-container .app-logo img{max-width:300px; width:auto;}
            .loading-container .progress{margin-top:20px;}
            .loading-container{width:470px; margin:0 auto; padding:100px 0 0 0; position:relative; z-index:998;}
            .loading-container p{text-align:center; padding:25px 0 0 0; font-size:16px;}
            @-webkit-keyframes progress-bar-stripes {
                from {background-position: 0 0;}
            to {background-position: 40px 0;}
            }
            @-moz-keyframes progress-bar-stripes {
                from {background-position: 0 0;}
            to {background-position: 40px 0;}
            }
            @-ms-keyframes progress-bar-stripes {
                from {background-position: 0 0;}
            to {background-position: 40px 0;}
            }
            @keyframes progress-bar-stripes {
                from {background-position: 0 0;}
            to {background-position: 40px 0;}
            }
            .progress {
                overflow: hidden;
                height: 28px;
                background-color: #fff;
                border:solid 1px #999;
            }
            .progress .bar {
                width: 0%;
                height: 28px;
                color: #ffffff;
                font-size: 12px;
                text-align: center;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                background-color: orange;

                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                box-sizing: border-box;
                -webkit-transition: width 0.6s ease;
                -moz-transition: width 0.6s ease;
                -ms-transition: width 0.6s ease;
                -o-transition: width 0.6s ease;
                transition: width 0.6s ease;
            }
            .progress-striped .bar {
                background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
                background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                -webkit-background-size: 40px 40px;
                -moz-background-size: 40px 40px;
                -o-background-size: 40px 40px;
                background-size: 40px 40px;
                background-color: #F67E09;
            }
            .progress.active .bar {
                -webkit-animation: progress-bar-stripes 2s linear infinite;
                -moz-animation: progress-bar-stripes 2s linear infinite;
                animation: progress-bar-stripes 2s linear infinite;
            }
        </style>
        <style>
            ::-webkit-scrollbar{
                width: 8px;
                height: 8px;
            }
            ::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(0,0,0,0.2); 
            }
            ::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0.4); 
            }

            ul.stream-menu>li::-webkit-scrollbar-thumb {
                background: rgba(255,255,255,0.4); 
            }
        </style>
    </head>
    <div class="loading-content" id="loading-animation">
        <div class="loading-container">
            <div class="app-logo"><img src="/Images/logo_beta.png"></div>

            <div class="progress progress-striped active">
                <div class="bar action-color-background" style="width: 0%;"></div>
            </div>

            <p class="loading-text">Loading interface...</p>
        </div>
    </div>
    <link href="/fav.ico" rel="icon" type="image/x-icon"/>
    <script src="/JS/Desktop/lazyload.js" type="text/javascript"></script>
    <script src="/JS/Desktop/loadscript.js" type="text/javascript"></script>
    <div class="modal hide fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <i data-dismiss="modal" class="icon-close-modal"></i>
                    <h3 class="modal-title"></h3>
                </div>
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>
    <?php if (strpos(strtoupper($this->mainView), "HOMEVIEWHTML.PHP")): ?>
        <style id="home-fix-style">
            .fixed-fluid {
                margin-left: 70px;
                z-index: 2002;
            }
            #action-menu-content {
                width: 190px;
                background: rgba(235,236,238,0.9);
            }
        </style>
    <?php endif; ?>
    <body onload="" style="font-family: Calibri; overflow: hidden;">
        <div style="clear:both;"></div>

        <div class="timeline signals-page" id="page-content">
            <?php include "MasterTimeline.php"; ?>
        </div>

        <div class="item-wrapper">
            <a class="retract"><i class="icon-close-modal"></i></a>

            <div class="item-container"></div>
        </div>

        <div class="mozaic-widget mozaic-initialized widget-status" data-guid="widget-465" data-widget="status"></div>
        <div class="modal-backdrop fade" style="display: none;"></div>
        <div id="main-tooltip" class="tooltip fade right in" style="top: 328px; left: 325px; display: none; z-index: 2001"><div class="tooltip-arrow"></div><div class="tooltip-inner">Filter metrics for a day, a week or as far back as the stream creation date!</div></div>
    </body>
    <script>
        var currentUserId = <?php global $userId; echo $userId; ?>;
    </script>
</html>